<template>
  <div class="transverse">
    <div class="item" v-for="(item,index) in data" :class="item.name==activaName?'active':''" :key="index" @click="click(item)">
      <img :src="item.name==activaName?item.imgActive:item.img" alt="">
      <img src="../../assets/images/licang/sq/zh.png" alt="" class="zh" v-if="item.name==activaName&&type=='sy'">
      <img src="../../assets/images/licang/sq/zh2.png" alt="" class="zh" v-if="item.name==activaName&&type=='wl'">
      <span>{{item.name}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    props: {
      type: {
        type: String,
        default: "sy"
      },
      data: {
        // 返回的数据
        type: Array | Object,
        default: function () {
          return [
            {
              img: require('@/assets/images/licang/sq/tab1.png'),
              imgActive: require('@/assets/images/licang/sq/tab1-2.png'),
              name: "餐饮",
            },
            {
              img: require('@/assets/images/licang/sq/tab2.png'),
              imgActive: require('@/assets/images/licang/sq/tab2-2.png'),
              name: "娱乐",
            },
            {
              img: require('@/assets/images/licang/sq/tab3.png'),
              imgActive: require('@/assets/images/licang/sq/tab3-2.png'),
              name: "教育",
            },
            {
              img: require('@/assets/images/licang/sq/tab4.png'),
              imgActive: require('@/assets/images/licang/sq/tab4-2.png'),
              name: "健康",
            },
            {
              img: require('@/assets/images/licang/sq/tab5.png'),
              imgActive: require('@/assets/images/licang/sq/tab5-2.png'),
              name: "商场",
            },
            {
              img: require('@/assets/images/licang/sq/tab6.png'),
              imgActive: require('@/assets/images/licang/sq/tab6-2.png'),
              name: "酒店",
            },
          ];
        },
      },
    },
    data() {
      return {
        activaName: ''
      }
    },
    created() { },
    mounted() {
    },
    methods: {
      click({ name }) {
        if (name == '餐饮'||name == '景区') {
          this.activaName = name
          this.$emit('navClick',name)
        }
      },
      reset() {
        this.activaName = ''
      }
    },
  };
</script>
<style lang="scss" scoped>
  .transverse {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-between;
    

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img {
        width: 100px;
        height: 100px;
        position: relative;
        z-index: 2;
      }

      span {
        margin-top: 15px;
        color: #ffffff;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 2px;
      }

      .zh {
        position: absolute;
        top: -12px;
        width: 130px;
        z-index: 1;
        height: 130px;
        -webkit-transform: rotate(360deg);
        animation: rotation 2s linear infinite;
        -moz-animation: rotation 2s linear infinite;
        -webkit-animation: rotation 2s linear infinite;
        -o-animation: rotation 2s linear infinite;
      }

      @-webkit-keyframes rotation {
        from {
          -webkit-transform: rotate(0deg);
        }

        to {
          -webkit-transform: rotate(360deg);
        }
      }

    }
    .active{
      /* pointer-events: fill; */
    }
  }
</style>